<!--
 * @Author: your name
 * @Date: 2021-08-04 14:26:36
 * @LastEditTime: 2021-08-13 17:54:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \niushop\src\views\Shouye\wode.vue
-->
<template>
<div>
    <header>
        <div class="dengru">
            <div class="huiyuan">会员中心</div> 
            <van-button type="primary" size="small" @click="login">登陆</van-button>
        </div>
      
       
       <div class="touxiang">
           <div class="imgs">
               <img src="../../assets/images/4.jpg" alt="">
           </div>
           <span>{{this.dl}}</span>
       </div>
       <div class="shenfen">{{this.ssf}}</div>
      
    </header>
    <main>
        <div class="tonglan">
            <ul>
                <li  class="leibie">
                    <div class="img"><van-icon name="bill-o" /></div>
                    <span>全部订单</span>
                </li>
                <li  class="leibie">
                    <div class="img"><van-icon name="refund-o" /></div>
                    <span>待付款</span>
                </li>
                <li  class="leibie">
                    <div class="img"><van-icon name="tosend" /></div>
                    <span>待发货</span>
                </li>
                <li  class="leibie">
                    <div class="img"><van-icon name="cash-back-record" /></div>
                    <span>退款/售后</span>
                </li>
            </ul>
        </div>
    <van-cell-group inset>
        <van-cell title="地址管理" icon="location" @click="golocation">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" class="arrow" />
            </template>
        </van-cell>
        <van-cell title="我的收藏" icon="like" @click="goNothing">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
           <template #right-icon>
                <van-icon name="arrow" class="arrow" />
            </template>
        </van-cell>
        <van-cell title="我的优惠券" icon="coupon" @click="gosale">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" class="arrow" />
            </template>
        </van-cell>
        <van-cell title="分销中心" icon="shop" @click="goNothing">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" class="arrow" />
            </template>
        </van-cell>
        <van-cell title="关于我们" icon="gem" @click="goNothing">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="arrow" class="arrow" />
            </template>
        </van-cell>
    </van-cell-group >
    <van-row type="flex" justify="space-between" class="hd">
          <van-col span="6"><van-icon name="flower-o" />便宜有好货</van-col>
          <van-col span="8"><van-icon name="underway-o" />次日16：00领取</van-col>
          <van-col span="6"><van-icon name="completed" />售后无忧</van-col>
        </van-row>
    </main>
    
    
</div>
  


</template>

<script >
export default {
    data(){
        return{
            dl:"请登陆",
            active:0,
            ssf:"你想要的都在这里,点击登陆即可访问~^-^~"
        }
    },
    mounted(){
        
        let token=window.sessionStorage.token
        if(token){
            console.log(window.sessionStorage.nickname);
            this.dl=window.sessionStorage.nickname
            this.ssf="欢迎进入优选商城，现在你可以购物了*^-^*"
        }
    },
    methods:{
        login(){
            this.$router.push("/login")
        },
        golocation(){
            this.$router.push("/location")
        },
         gosale(){
            this.$router.push("/sale")
        },
         goNothing(){
            this.$router.push("/nothing")
        },
    }
}
</script>

<style scoped>

header{
    height: 200px;
    background: linear-gradient(to right, #ff7647 ,#fd190c);
    color: #f6f6f6;
}
.dengru{
    padding: 20px;
    display: flex;
    justify-content: space-between;
    
}
.huiyuan{
    font-size: 20px;
}
main{
    background: #f6f6f6;   
}
.van-cell-group{
    background: white;
}
.tabbar{
    height: 60px;
}
.hd{
font-size:12px;
line-height: 40px;
margin-left: 20px;
}
ul{
  display: flex;
 box-sizing: border-box;
  width: 100%;
 
}
li{
box-sizing: border-box;
  width:25% ;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.imgs,.img{
    font-size: 30px;
}
.imgs{
  height: 80px;
  width: 80px;
  border-radius: 40px;
}
.imgs>img{
  border-radius: 40px;
}
.touxiang>span{
    margin: 10px;
}
.touxiang{
    display: flex;
    align-items: center;
    margin-left: 30px;
    color: #f6f6f6;
}
.shenfen{
    margin: 10px;
}
</style>